
<template>
  <div class="background-gray" id="carfri_meetLists">
    <empty class="empty" v-if="meetLists.length === 0" message="暂时没有车友会"></empty>
    <ma-scroll v-else :down="true" :up="true" :refresh="refresh" :getMore="getList"  :showMsg="false" :init="init">
      <!--<magic-header titleName="车友会"></magic-header>-->
      <!--<form class="search" onsubmit="return false">
        <input type="search" id="searchFleet" v-model="searchValue" placeholder="搜索" @keydown="goSearch" autocomplete="off">
      </form>-->
      
      <div v-for="item in meetLists" :key="item">
        <car-friend-item :value="item"></car-friend-item>
      </div>
      
    </ma-scroll>
  </div>
</template>

<script>
//import magicHeader from "components/magicHeader";
import left from "assets/left-gray.svg";
import empty from "components/empty-page.vue";
import Loadmore from "components/loadmore";
// services
import QueryFleetListService from "services/carFriend/QueryFleetList";
import SignService from "services/carFriend/Sign";
import carFriendItem from "components/carFriendItem"

export default {
  name: "carfri_meetLists",
  components: {
    //  magicHeader,
    empty,
    loadMore: Loadmore,
    carFriendItem
  },
  data() {
    return {
      left,
      meetLists: [],
      allLoaded: false,
      searchValue: "",
      id: "",
      hasSign: false,
      memberPosition: "",
      disbaled: false,
      init:false
    };
  },
  methods: {
    refresh(callback){
      let vm = this;
         return new Promise(function(resolve, reject) {
        QueryFleetListService.bind(vm)(
          {},
          res => {
            vm.meetLists.push(...res);
               vm.init = true;
               resolve(callback);
          }
        );
      });
    },
    getList(callback) {
      let vm = this;
         return new Promise(function(resolve, reject) {
        QueryFleetListService.bind(vm)(
          {},
          res => {
            vm.meetLists.push(...res);
               vm.init = true;
               resolve(callback);
          }
        );
      });
    },
   
    // 下拉刷新
    loadBottom() {
      this.getList();
    },
    // 获取车友会列表数据
    getList(searchValue) {
      let _self = this;
      QueryFleetListService.bind(this)(
        {
          searchValue: searchValue
        },
        resp => {
          // pageable.pageNumber++
          _self.meetLists = [];
          console.log(resp.fleets);
          setTimeout(() => {
            _self.meetLists = resp.fleets;
          }, 10);
        }
      );
    },
    refList() {
      let _self = this;
      QueryFleetListService.bind(this)({}, resp => {
        // pageable.pageNumber++
        _self.meetLists = [];
        console.log(resp.fleets);
        _self.meetLists = resp.fleets;
      });
    },
    
    // 搜索车友会
    goSearch(e) {
      if (event.keyCode === 13) {
        document.getElementById("searchFleet").blur();
        this.getList(this.searchValue);
      }
    }
  },
  created() {
    // 判断是否进行搜索
    QueryFleetListService.bind(this)(
      {
        searchValue: ""
      },
      resp => {
        this.meetLists = resp.fleets;
      }
    );
  }
};
</script>
<style>

#carfri_meetLists .search {
  width: 100%;
  background-color: #c9c9ce;
  padding: 6px 10px;
}
#carfri_meetLists .search input {
  width: 100%;
  display: block;
  /*border-radius: 5px;*/
  height: 30px;
  line-height: 30px;
  outline: none;
  text-align: center;
  border: none;
  border-radius: 10px;
  background: url(../../assets/search.svg) no-repeat 15px;
  background-color: #fff;
}

#carfri_meetLists h4 {
  font-size: 15px;
  color: #414141;
}
#carfri_meetLists p {
  color: #666666;
  font-family: Arial, Helvetica, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#carfri_meetLists .scroller{
    width: 100%;
  }
#carfri_meetLists  #wrapper{
        top: 100px;
    }
</style>